import Vue from 'vue'
import Vuex from 'vuex'

import {
    INCREMENT
} from './mutation-types'

//1. 安装插件
Vue.use(Vuex)

//2. 创建对象
const moduleA = {
    state: {
        name: 'leon2'
    },
    mutations: {
        updateName(state, payload) {
            state.name = payload
        }
    },
    getters: {
        changeName(state) {
            return state.name + '45'
        },
        changeName2(state, getters) {
            return getters.changeName + '678'
        },
        changeName3(state, getters, rootState) {
            return getters.changeName2 + rootState.counter
        }
    },
    actions: {
        lastUpdateName(context) {
            setTimeout(() => {
                context.commit('updateName', 'commitChange')
            }, 1000)
        }
    }
}


const store = new Vuex.Store({
    state: {
        counter: 1000,
        students: [
            {id: 100, name: 'leon', age: 18},
            {id: 101, name: '金克斯', age: 15},
            {id: 102, name: '阿卡丽', age: 18},
            {id: 103, name: '卡莉斯塔', age: 14},
        ],
        info: {
            name: '提莫队长',
            age: 15,
            height: 160
        }
    },
    mutations: {
        //mutations的类型常量
        [INCREMENT](state) {
            state.counter++
        },
        decrement(state) {
            state.counter--
        },
        // incrementCount(state, count) {
        //     state.counter += count
        // },
        incrementCount(state, payload) {
            state.counter += payload.count
            //App.vue的methods里传过来的那个count已经成为一个对象
        },
        addStudent(state, stu) {
            state.students.push(stu)
        },
        updateInfo(state) {
             state.info.name = '加里奥';

            // setTimeout(() => {
            //     state.info.name = '加里奥'
            // }, 3000)
            //注意 如果是异步的方法 Devtools是监测不到的
            //所以不要在mutations中写异步代码

            // Vue.set(state.info, 'address', '约德尔')
            //通过state.info['address'] = '约德尔' 不能改变信息 
            //因为这个信息不是响应式的

            //delete state.info.age
            //上面的方法做不到响应式

            // Vue.delete(state.info, 'age')
        }
    },
    actions: {
        //context 上下文
        actUpdateInfo(context, payload) {
            //此处的return 返回到了dispatch调用的那里 所以可以写then
           return new Promise((resolve, reject) => {
            setTimeout(() => {
                context.commit('updateInfo')
                console.log(payload);
                resolve('此处的then到App.vue中')
            }, 3000) 
           })
        }
    },
    getters: {
        powerCounter(state) {
            return state.counter * state.counter
        },
        more20Stu(state) {
            return state.students.filter(s => s.age > 11)
        },
        more20StuLength(state, getters) {
            return getters.more20Stu.length
        },
        moreAgeStu(state) {
            return function(age) {
                return state.students.filter(s => s.age > age)
            }
        }
    },
    modules: {
        a: moduleA
    }   
})

//3. 导出
export default store